<template>
  <div>
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle' :disabled="submitFlag">提交</button>
          </div>
        </div>
      </div>
      <div class="total">
        <span>图书总数：</span>
        <span>{{ total }}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.date | dateFormat2('yyyy-MM-dd hh:mm:ss') }}</td>
            <td>
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestLibary",
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  data() {
    return {
      flag: false,
      submitFlag: false,
      id: '',
      name: '',
      books: []
    }
  },
  methods: {
    handle: function () {
      if (this.flag) {
        // 编辑图书
        // 就是根据当前的ID去更新数组中对应的数据
        this.books.some((item) => {
          if (item.id === this.id) {
            item.name = this.name;
            // 完成更新操作之后，需要终止循环
            return true;
          }
        });
        this.flag = false;
      } else {
        // 添加图书
        let book = {};
        book.id = this.id;
        book.name = this.name;
        book.date = new Date();
        this.books.push(book);
      }
      // 清空表单
      this.id = '';
      this.name = '';
    },
    toEdit: function (id) {
      // 禁止修改ID
      this.flag = true;
      console.log(id)
      // 根据ID查询出要编辑的数据
      let book = this.books.filter(function (item) {
        return item.id === id;
      });
      console.log(book)
      // 把获取到的信息填充到表单
      this.id = book[0].id;
      this.name = book[0].name;
    },
    deleteBook: function (id) {
      // 删除图书
      // 根据id从数组中查找元素的索引
      // var index = this.books.findIndex(function(item){
      //   return item.id == id;
      // });
      // 根据索引删除数组元素
      // this.books.splice(index, 1);
      // -------------------------
      // 方法二：通过filter方法进行删除
      this.books = this.books.filter(function (item) {
        return item.id !== id;
      });
    }
  },
  /* 计算属性，计算书籍总量 */
  computed: {
    total: function () {
      // 计算图书的总数
      return this.books.length;
    }
  },
  /* 侦听器，验证图书是否存在 */
  watch: {
    name: function (val) {
      // 验证图书名称是否已经存在
      this.submitFlag = this.books.some(function (book) {
        return book.name === val;
      });
    }
  },
  /* 钩子函数，挂载完成时，填充数据 */
  mounted: function () {
    // 该生命周期钩子函数被触发的时候，模板已经可以使用
    // 一般此时用于获取后台数据，然后把数据填充到模板
    this.books = [{
      id: 1,
      name: '三国演义',
      date: 2525609975000
    }, {
      id: 2,
      name: '水浒传',
      date: 2525609975000
    }, {
      id: 3,
      name: '红楼梦',
      date: 2525609975000
    }, {
      id: 4,
      name: '西游记',
      date: 2525609975000
    }];
  }


}
</script>

<style scoped>
.grid {
  margin: auto;
  width: 530px;
  text-align: center;
}

.grid table {
  border-top: 1px solid #C2D89A;
  width: 100%;
  border-collapse: collapse;
}

.grid th, td {
  padding: 10px;
  border: 1px dashed #F3DCAB;
  height: 35px;
  line-height: 35px;
}

.grid th {
  background-color: #F3DCAB;
}

.grid .book {
  padding-bottom: 10px;
  padding-top: 5px;
  background-color: #F3DCAB;
}
</style>